<html lang="en"> <head> <script src="./d3/d3-4.7.3/d3.js"></script> </head> <body>
    <!-- 默认的坐标轴样式不太美观, 下面提供一个常见的样式: 分别定义了类 axis 下的 path、line、text 元素的样式 -->
    <style>
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
        var linear = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0, 250]); // 定义比例尺
        var axis = d3.axisBottom() // Bottom 指定刻度的方向, 表示在坐标轴的下方显示
            .scale(linear) // 指定比例尺
            .ticks(7); // 指定刻度的数量
        var svg = d3.select("body").append("svg");
        svg.append("g").call(axis); // 在 SVG 中添加一个分组元素, 再将坐标轴的其他元素添加到这个分组里即可
        // call() 的参数是一个函数, 将调用函数本身作为参数传递给参数的函数, 即: 将 axis(svg.append("g"))
        svg.select("g").attr("class", "axis").attr("transform", "translate(20,130)")  // transform 定义了坐标轴的位置
        // 不用 CSS 美化也挺好看
    </script>
</body> </html>
